<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      style="color: white"
      title="宠物派"
      left-text="登录"
      right-text="注册"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <!-- 第二部分 -->
    <div class="bc-img"></div>
    <div class="all">
      <div class="img-one">
        <img src="../assets/swipe/zhua.png" alt="" />
        <p>上门喂猫</p>
      </div>
      <div class="img-two">
        <img src="../assets/swipe/zhua1.png" alt="" />
        <p>上门遛狗</p>
      </div>
    </div>
    <!-- 第三部分 -->
    <div class="three">
      <div class="th-img">
        <img src="../assets/swipe/05.png" alt="" />
      </div>
      <div class="th-word">
        <p>已累计服务宠物</p>
        <span>12,195</span>
        <p>截止2022.01</p>
      </div>
    </div>
  </div>
</template>
<style>
/* 样式一 */
.van-hairline--bottom {
  background-color: white;
}
.van-nav-bar__content {
  background-color: #ea9c4b;
}
.van-nav-bar__title {
  color: white;
}
.van-nav-bar__text {
  color: white;
}
/* 样式二 */
.bc-img {
  height: 30vh;
  background: url("../assets/swipe/logo3.jpg");
  background-size: 100vw 24rem;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
}
.all {
  background-color: #ea9c4b;
  width: 35rem;
  height: 16rem;
  display: flex;
  margin: auto;
  /* margin-top: 1rem; */
  /* box-shadow: 0 0.4rem 0.8rem 0 rgba(0, 0, 0, 0.2),
    0 0.6rem 2rem 0 rgba(0, 0, 0, 0.19);
  border: 0.1rem solid lightgray; */
  border-radius: 1.5rem;
}
.img-one,
.img-two {
  width: 15rem;
  margin: auto;
}

.img-one > img,
.img-two > img {
  display: block;
  width: 20vw;
  margin-left: auto;
  margin-right: auto;
}
.img-one,
.img-two p {
  font-size: 2rem;
  text-align: center;
  color: white;
}

/* 样式三 */
.three {
  display: flex;
  justify-content: space-evenly;
  background-color: white;
}
.th-img {
  width: 30vw;
  height: 14vh;
  display: flex;
  justify-content: center;
  margin-top: 4rem;
  margin-left: 3rem;
}
.th-word {
  width: 30vw;
  margin: 2rem;
  margin-right: 5rem;
  padding: 1rem;
}

.th-word p {
  color: #524f5e;
  font-size: 1rem;
  font-family: auto;
  font-weight: bold;
}
.th-word span {
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-size: 3rem;
  color: #ea9c4b;
}
</style>